<template>
  <div class="strut-div">
    <!-- <div class="dual-area-title">
			<span class="y-name">{{config.option.yName}}</span>
			<span v-for="y in config.option.y" :key="y.title"> <span :style="{borderColor: y.color}"></span> {{y.title}}</span>
		</div> -->
    <div class="strut-div"><div :id="config.option.id" class="strut-div"></div></div>
  </div>
</template>

<script>
import echarts from 'echarts';
import autoHover from '../../util/autoHover.js';
export default {
  name: 'CommonLineChart',
  props: ['config'],
  data() {
    return {
      chart: null,
      timeTicket: null
    };
  },
  methods: {
    initChart() {
      let _this = this;
      let option = {
        grid: {
          left: 50,
          top: 35,
          right: 20,
          bottom: _this.config.option.limit ? 85 : 40
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: '' // 默认为直线，可选为：'line' | 'shadow' | ''空值没背影
          }
          // formatter:(params, ticket, callback)=>{
          // 	console.log(params);
          // 	let htmlString = "";
          // 	htmlString = ""
          // 	+ params[0].name
          // 	+ "<br>"
          // 	+ params[0].value + " " + this.config.option.x1.title
          // 	+ "<br>"
          // 	+ params[1].value + " " + this.config.option.x2.title ;

          // 	return htmlString;
          // }
        },
        legend: {
          show: true,
          top: 5,
          textStyle: {
            color: '#FFF',
            fontSize: '16px'
          }
        },
        xAxis: {
          type: 'category',
          boundaryGap: this.config.option.boundaryGap || false,
          axisLabel: {
            interval: 0
          },
          axisPointer: {
            type: 'shadow'
          },
          axisLabel: {
            interval: 0,
            fontSize: 14,
            formatter: function(value) {
              var ret = ''; //拼接加\n返回的类目项
              var maxLength = 3; //每项显示文字个数
              var valLength = value.length; //X轴类目项的文字个数
              var rowN = Math.ceil(valLength / maxLength); //类目项需要换行的行数
              if (rowN > 1 && _this.config.option.limit) {
                //如果类目项的文字大于3,
                for (var i = 0; i < rowN; i++) {
                  var temp = ''; //每次截取的字符串
                  var start = i * maxLength; //开始截取的位置
                  var end = start + maxLength; //结束截取的位置
                  //这里也可以加一个是否是最后一行的判断，但是不加也没有影响，那就不加吧
                  temp = value.substring(start, end) + '\n';
                  ret += temp; //凭借最终的字符串
                }
                return ret;
              } else {
                return value;
              }
            }
          }
        },
        yAxis: [
          {
            type: 'value',
            splitLine: {
              lineStyle: {
                color: 'rgba(10,61,102,0.5)'
              }
            },
            axisLine: {
              show: true
            },
            min: this.config.option.y[0].axis.min,
            max: this.config.option.y[0].axis.max,
            offset: this.config.option.yOffset
          }
        ],
        series: [],
        textStyle: {
          color: '#E9F4FF'
        }
      };

      for (let i = 0; i < this.config.option.y.length; i++) {
        option.series.push({
          type: 'line',
          smooth: false,
          color: this.config.option.y[i].color,
          lineStyle: {
            color: this.config.option.y[i].color
          },
          data: this.config.option.y[i].y,
          label: {
            show: (this.config.option.y[i].label && this.config.option.y[i].label.show) || false,
            color: (this.config.option.y[i].label && this.config.option.y[i].label.color) || '#fff',
            fontSize: (this.config.option.y[i].label && this.config.option.y[i].label.fontSize) || 12
          }
        });
      }
      setTimeout(() => {
        option.xAxis.data = this.config.option.x;

        for (let i = 0; i < this.config.option.y.length; i++) {
          option.series[i].data = this.config.option.y[i].data;
          option.series[i].name = this.config.option.y[i].title;
        }
        this.chart.setOption(option);
        this.timeTicket = autoHover.autoHover(this.chart, option, option.xAxis.data.length, 2000);
      }, 300);
    },
    refreshChart() {}
  },
  mounted() {
    this.chart = echarts.init(document.getElementById(this.config.option.id));
  },
  beforeDestroy() {
    autoHover.stopHover(this.timeTicket);
  }
};
</script>

<style scoped lang="scss" type="text/scss">
.dual-area-title {
  height: 30px;
  line-height: 30px;
  .y-name {
    float: left;
  }
  > span {
    float: right;
    margin-left: 35px;
    font-size: 16px;
    position: relative;

    > span {
      position: absolute;
      width: 10px;
      height: 10px;
      border-radius: 10px;
      border: 4px solid yellow;
      top: 5px;
      left: -26px;
    }
  }
}
</style>
